<template>
    <el-container>
        <el-header>
            <div class="right-panel-search">
                <div class="search-input">物料名称</div>
                <el-select v-model="search.material_id"  filterable placeholder="请选择物料名称" clearable>
                    <el-option v-for="item in materialName" :key="item.id" :label="item.material_name" :value="item.id"/>
                </el-select>
                <div class="search-input">物料类别</div>
                <el-select v-model="search.category_id" placeholder="请选择" @change="change" clearable>
                    <el-option label="毛料" :value="1"></el-option>
                    <el-option label="辅料" :value="2"></el-option>
                    <el-option label="其他" :value="3"></el-option>
                </el-select>
                <div class="search-input">供应商</div>
                <el-select v-model="search.supplier_id"  filterable placeholder="请选择物料名称" clearable>
                    <el-option v-for="item in apply" :key="item.apply_id" :label="item.apply_name" :value="item.apply_id"/>
                </el-select>
                <div class="search-input">颜色</div>
                <el-input v-model="search.colour" placeholder="请输入颜色" clearable @change="handleKeyDown" />
                <div class="search-input">SKU</div>
                <el-input v-model="search.sku" placeholder="请输入SKU" clearable @change="handleKeyDown" />
                <el-button type="primary" icon="el-icon-search" @click="upsearch">搜索</el-button>
            </div>
        </el-header>
        <el-header>
            <el-button type="primary" @click="allPrint" :disabled="selection.length == 0">批量打印</el-button>
        </el-header>
        <el-main class="nopadding">
            <scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange" stripe remoteSort remoteFilter border>
                <el-table-column type="selection" width="50"></el-table-column>
                <el-table-column label="物料类别" prop="category_name" align="center"></el-table-column>
                <el-table-column label="物料名称" prop="material_name" align="center"></el-table-column>
                <el-table-column label="供应商" prop="referred_as" align="center"></el-table-column>
                <el-table-column label="SKU" prop="sku" align="center"></el-table-column>
                <el-table-column label="SKC" prop="skc" align="center"></el-table-column>
                <el-table-column label="色号" prop="color_number" align="center"></el-table-column>
                <el-table-column label="颜色" prop="colour" align="center"></el-table-column>
                <el-table-column label="图片" prop="colour" align="center">
                    <template #default="{row}">
                        <el-image class="img" :src="row.image" :preview-src-list="[row.image]" :initial-index="0" fit="cover"
                            preview-teleported="true" hide-on-click-modal
                            />
                    </template>
                </el-table-column>
                <el-table-column label="二维码" prop="colour" align="center">
                    <template #default="{row}">
                        <el-image class="img" :src="row.qrcode" :preview-src-list="[row.qrcode]" :initial-index="0" fit="cover"
                            preview-teleported="true" hide-on-click-modal
                            />
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <el-button-group>
                            <el-button text type="primary" size="small" @click="print(scope.row, scope.$index)" v-auth="'qrcode.print'">打印二维码</el-button>
                        </el-button-group>
                    </template>
                </el-table-column>
            </scTable>
        </el-main>
    </el-container>
    <print ref="printDialog"></print><!--打印 -->
</template>

<script>
import print from '@/views/order/print.vue'
export default {
  components: { print },
	name: 'user',
	data() {
		return {
			dialog: {
				save: false,
				print: false,
			},
			groupFilterText: '',
			group: [],
			apiObj: this.$API.material.qrcode,
			selection: [],
			search: {
				material_id: null,
				category_id: null,
				supplier_id: null,
				sku: null,
                colour:null,
			},
			//所需数据选项
			cates: [],
            apply:[],
            materialName:[],
		}
	},
	mounted() {
        this.getName()
	},
	methods: {
        // 打印
        async print(row){
            var reqData = { ids:row.id };
            var res = await this.$API.print.qrcodePrint.get(reqData);
            if (res.code == 1) {
                this.$refs.printDialog.init(res.data);
            } else {
                this.$alert(res.message, "提示", { type: "error" });
            }
        },
        // 批量打印
        async allPrint(){
            let ids = []
            this.selection.map(item=>{
                ids.push(item.id)
            })
            var reqData = { ids:ids };
            var res = await this.$API.print.qrcodePrint.get(reqData);
			 if (res.code == 1) {
			 	this.$refs.printDialog.init(res.data);
			 } else {
			 	this.$alert(res.message, "提示", { type: "error" });
			 }

        },
		//搜索
		upsearch() {
			this.$refs.table.upData(this.search)
		},
		//本地更新数据
		handleSuccess(data, mode) {
			if (mode == 'add') {
				this.$refs.table.refresh()
			} else if (mode == 'edit') {
				this.$refs.table.refresh()
			} else if (mode == 'set') {
				this.$refs.table.refresh()
			}
		},
        // 切换禁用状态
        async changeSwitchDefault(val, row) {
			row.$switch_status = true;
			var res = await this.$API.material.getSupplierList.update_status.post({
				id: row.id,
				system_disable: row.system_disable,
			});
			if (res.code == 1) {
				row.$switch_status = false;
				this.$refs.table.refresh();
				this.$message.success("操作成功");
			} else {
				this.$alert(res.message, "提示", { type: "error" });
			}
		},
        selectionChange(selection) {
			this.selection = selection;
		},
        // 获取物料名称
        async getName(){
            var res = await this.$API.all.material.get();
            this.materialName = res.data;
        },
        async change(e){
            if(e==1){
                var res = await this.$API.all.Apply.get({type:3});
                this.apply = res.data;
            }else if(e==2){
                var data = await this.$API.all.Apply.get({type:4});
                this.apply = data.data;
            }else if(e==3){
                var a = await this.$API.all.Apply.get({type:5});
                this.apply = a.data;
            }
        },
        handleKeyDown() {
            this.upsearch()
        },
	}
}
</script>

<style>
.search-input {
	width: auto;
	font-size: 14px;
}
.img{
        width: 100px;
        height: 100%;
        margin-right: 5px;
    }
</style>
